.container {
    padding: .4rem;
    box-sizing: border-box;

    .header {
        position: relative;

        .btn-group {
            padding: 0;

            .btn:first-child {
                margin-left: 10px;
            }
        }

        .add {
            float: right;
        }
    }

    .btn {
        display: inline-block;
        background-color: #fff;
        transition: .1s;
        padding: 8px 12px;
        box-sizing: border-box;
        box-shadow: 0 0 1px rgba(0, 0, 0, .2);

        &:hover {
            box-shadow: 0 0 2px rgba(0, 0, 0, .2);
            cursor: pointer;
        }

        &:active,
        &.active {
            box-shadow: 0 0 1px rgba(0, 0, 0, .2), inset 0 0 4px rgba(0, 0, 0, .1);
        }
    }

    .list {
        margin: 20px 0;position: relative;
        .list-item {
            position: absolute; width: 100%;
            box-shadow: 0 0 1px rgba(0, 0, 0, .2);
            margin-bottom: 20px;
            padding: 20px 10px;
            box-sizing: border-box;
            transition: transform .5s ease-in-out, opacity .5s ease-out, left .5s ease-in-out;
            -webkit-transition: transform .5s ease-in-out, opacity .5s ease-out, left .5s ease-in-out;

            div {
                display: inline-block;
                vertical-align: middle;
            }

            div:nth-child(1) {
                width: 5%;
                flex-shrink: 0;
            }

            div:nth-child(2) {
                width: 30%;
                flex-shrink: 0;
            }

            div:nth-child(3) {
                width: 65%;
            }

            .rm-btn {
                position: absolute;
                top: 0;
                right: 0;
                font-size: 14px;
                color: #C25151;
                width: 20px;
                height: 20px;
                line-height: 20px;
                padding: 0;
                text-align: center;
            }
        }
    }
}